import React, {PureComponent} from 'react'
import {
    View,
    Button,
    SafeAreaView,
    Text,
    StyleSheet,
    TextInput,
    ScrollView,
    Dimensions,
    TouchableOpacity,
    Image
} from 'react-native'
import color from "../../../widget/color";
import api from '../../../api/api'
import method from '../../../api/method'
import {fetchPostRequest} from '../../../api/NetworkTool'
// import Toast, {DURATION} from 'react-native-easy-toast'
import Tips from 'react-native-root-tips'


export default class MineInfoFeekback extends PureComponent {
    static navigationOptions = ({navigation}: any) => ({

        headerTintColor: 'black',
        title: '意见反馈',
        headerStyle: {backgroundColor: 'white'},
        headerRight: <Text/>,
        headerLeft: <TouchableOpacity onPress={()=>{
            navigation.goBack()
        }}>
            <Image style={{marginLeft:12}} source={require('../../../../res/img/gobal_back.png')}/>
        </TouchableOpacity>
    })

    constructor(props) {
        super(props)
        this.state = {
            change: 200,
            content: '',
            isshow: false,
        }
    }

    render() {
        return (
            <SafeAreaView style={{flex:1,backgroundColor:'white'}}>
                <ScrollView>
                    <Text style={{color:'#333333',marginLeft:12,marginTop:15,fontWeight:'200',fontSize:11}}>留下您宝贵的意见，我们将会进一步完善！</Text>
                    <View
                        style={{paddingLeft:12,paddingRight:12,paddingTop:12,marginLeft:12,marginRight:12,marginTop:15,backgroundColor:'#F5F5F5',borderRadius:3}}>
                        <TextInput textAlign='left' underlineColorAndroid='transparent'
                                   onChangeText={(text)=>{this._onChangeText(text)}} textAlignVertical={'top'}
                                   multiline={true} maxLength={200} style={{height:134,fontSize:11}}
                                   placeholder='在这里输入...' placeholderTextColor='rgba(0,0,0,0.3)'/>
                        <View
                            style={{backgroundColor:'#F5F5F5',flexDirection:'row',marginBottom:12, justifyContent:'flex-end'}}>
                            <Text
                                style={{fontSize:11,color:'rgba(0,0,0,0.3)',fontWeight:'200',width:22}}>{this.state.change}</Text>
                            <Text style={{fontSize:11,color:'rgba(0,0,0,0.3)',fontWeight:'200',width:30}}>/200</Text>
                        </View>
                    </View>
                </ScrollView>
                {this.isshow()}
            </SafeAreaView>
        )
    }

    isshow() {
        if (this.state.isshow) {
            return <TouchableOpacity onPress={() => {
                this.commmit()
            }}
                                     style={{
                                         backgroundColor: color.globalMainColor,
                                         justifyContent: 'center',
                                         alignItems: 'center',
                                         height: 50
                                     }}>
                <Text style={{fontWeight: 'bold', fontSize: 16, color: 'white'}}>提交</Text>
            </TouchableOpacity>
        } else {
            return <View
                style={{
                                         backgroundColor: '#999999',
                                         justifyContent: 'center',
                                         alignItems: 'center',
                                         height: 50
                                     }}>
                <Text style={{fontWeight: 'bold', fontSize: 16, color: 'white'}}>提交</Text>
            </View>
        }
    }

    commmit() {

        if (this.state.content.replace(/(^\s*)/g,"").length <= 10) {
            Tips.showWarn('请认真填写留言,最少10字', {mask: true})
            return
        }
        let params = {
            message: this.state.content,
        }
        fetchPostRequest(api.createUserMessage, method.post, params)
            .then(res => {
                Tips.showSuccess('留言成功！', {mask: true})
                this.props.navigation.goBack()
            })
            .catch(err=>{
                Tips.showWarn(err, {mask: true})
            })

    }


    _onChangeText(text) {
        if (text.length <= 0) {
            this.setState({isshow: false})
        } else {
            this.setState({isshow: true})
        }
        this.setState({change: (200 - text.length), content: text})
    }
}